import React from "react";
import {inject, observer} from "mobx-react";
import {toJS} from "mobx";
import {withRouter} from "react-router-dom";
import {Bubble, Icon, InputItem, List, Tools, Button} from "weaver-mobile";
import {BrowserHrm, RouteLayout, Browser} from "weaver-mobile-page";

const getLabel = Tools.getLabel;

/**
 * 我的考核方案-考核明细新建编辑
 * jiansong 2019/11/8
 */
@inject("programViewStore")
@withRouter
@observer
export default class ScoreEdit extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            score: {
                id: "",
                checkuserid: null,
                checkuseridspan: null,
                checkusername: null,
                rate: "",
                templateid: null,
                templatename: null,
            }
        };
        this.store = this.props.programViewStore;
    }

    componentWillMount() {
        const queryString = this.props.location.state
        if (queryString) {
            this.setState({
                score: queryString
            })
        }
    }

    render() {
        const {detail, scoreBrowserHrm, templateBrowser} = this.store;
        const {score: {checkuserid, checkusername, rate, templateid, templatename}} = this.state;
        return (
            <div className="wm-route-layout workrelate-condition workrelate-task-am-list-label">
                <List>
                    <BrowserHrm
                        label={getLabel(508672, "评分人")}
                        store={scoreBrowserHrm}
                        hasAdvanceSerach
                        isSingle={true}
                        type={1}
                        requried
                        viewAttr={3}
                        onChange={(id, name) => this.chooseCheckUser(id, name)}
                        valueArray={checkuserid == null ? [] : [{id: checkuserid, name: checkusername}]}
                    />
                    <div className="workrelate-programView-score-manager">
                        <Button onClick={() => this.getManager()}
                                className="manager-button">{getLabel(15709, '直接上级')}</Button>
                    </div>
                </List>
                <List>
                    <List.FormItem
                        label={getLabel(6071, "权重") + "(%)"}
                        noBorder
                        line
                        required={rate == ""}
                        extra={<Icon type="editor" size={"xxs"}/>}
                        content={<InputItem
                            value={rate}
                            placeholder={getLabel(83869, "请输入")}
                            onChange={(val) => this.handleRateChange(val)}
                        />}
                    />
                </List>
                <List>
                    <Browser
                        label={"指标模板"}
                        store={templateBrowser}
                        onChange={(id, name) => this.chooseTemplate(id, name)}
                        type="wrlperitem"
                        viewAttr={2}
                        valueArray={templateid == null ? [] : [{id: templateid, name: templatename}]}
                        isSingle/>
                </List>
                <RouteLayout.ButtonGroup data={this.getButton()}/>
            </div>
        );
    }

    //获取操作按钮
    getButton = () => {
        return [{
            key: "cancel",
            text: getLabel(31129, "取消"),
            onClick: () => this.props.history.go(-1),
        }, {
            key: "save",
            text: getLabel(30986, "保存"),
            onClick: () => this.handleSave(),
            type: "primary",
        }];
    }

    //权重变化
    handleRateChange = (val) => {
        if (!isNaN(val)) {
            if (val < 0) {
                val = 0
            }
            if (val > 100) {
                val = 100
            }
            this.setState({
                score: {
                    ...this.state.score,
                    rate: val
                }
            })
        }
    }

    //获取被考核人上级
    getManager = () => {
        const {form: {accessScoreData}, detail: {managerid, managername}} = this.store;
        if (managerid == '' || managerid == '0') {
            Bubble.warning(getLabel(509117, '直接上级不存在,请重新选择!'));
            return;
        }
        var find = accessScoreData.find(item => item.checkuserid == managerid);
        if (find && find.id != this.state.score.id) {
            Bubble.warning(getLabel(509118, '评分人已存在!'));
            return;
        }
        this.setState({
            score: {
                ...this.state.score,
                checkuserid: managerid,
                checkuseridspan: managername,
                checkusername: managername,
            }
        })
    }

    //选择评分人
    chooseCheckUser = (id, name) => {
        const {form: {accessScoreData}} = this.store;
        let flag = accessScoreData.find(item => item.checkuserid == id);
        if (flag && flag.id != this.state.score.id) {
            Bubble.warning(getLabel(509118, "评分人已存在!"));
        } else {
            this.setState({
                score: {
                    ...this.state.score,
                    checkuserid: id,
                    checkuseridspan: name,
                    checkusername: name,
                }
            })
        }
    }

    //选择指标模板
    chooseTemplate = (id, name) => {
        this.setState({
            score: {
                ...this.state.score,
                templateid: id,
                templatename: name
            }
        })
    }

    //保存操作
    handleSave = () => {
        const {score,score: {id, checkuserid, rate, checkuseridspan, checkusername, templateid, templatename}} = this.state;
        if (checkuserid == "" || checkuserid == undefined) {
            Bubble.warning(getLabel(509119, "评分人不能为空！"));
            return
        }
        if (rate == "" || rate == undefined) {
            Bubble.warning(getLabel(513683, "权重不能为空"));
            return
        }
        // if (id === "") {
        //     let newid = Math.random().toString(36).substr(3, 10)
        //     this.store.form.accessScoreData.push({
        //         id: newid,
        //         checkuserid,
        //         checkuseridspan,
        //         checkusername,
        //         rate,
        //         templateid,
        //         templatename,
        //     })
        // } else {
        //     this.store.form.accessScoreData.map(item => {
        //         if (item.id == id) {
        //             item.checkuseridspan = checkuseridspan;
        //             item.checkusername = checkusername;
        //             item.checkuserid = checkuserid;
        //             item.rate = rate;
        //             item.templateid = templateid;
        //             item.templatename = templatename;
        //         }
        //     })
        // }
        if(typeof this.props.onCallBack ==="function"){
            this.props.onCallBack(score,id);
        }
        this.props.history.go(-1)
    };
}